import {List, Spin} from 'antd';
import React from 'react';

import WindowScroller from 'react-virtualized/dist/commonjs/WindowScroller';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import VList from 'react-virtualized/dist/commonjs/List';
import InfiniteLoader from 'react-virtualized/dist/commonjs/InfiniteLoader';

class ArticleList extends React.Component {
    render() {
        const {data} = this.props;
        const vlist = ({height, isScrolling, onChildScroll, scrollTop, onRowsRendered, width}) => (
            <VList
                autoHeight
                height={height}
                isScrolling={isScrolling}
                onScroll={onChildScroll}
                overscanRowCount={2}
                rowCount={data.length}
                rowHeight={73}
                rowRenderer={this.props.renderItem}
                onRowsRendered={onRowsRendered}
                scrollTop={scrollTop}
                width={width}
            />
        );
        const autoSize = ({height, isScrolling, onChildScroll, scrollTop, onRowsRendered}) => (
            <AutoSizer disableHeight>
                {({width}) => vlist({height, isScrolling, onChildScroll, scrollTop, onRowsRendered, width})}
            </AutoSizer>
        );
        const infiniteLoader = ({height, isScrolling, onChildScroll, scrollTop}) => (
            <InfiniteLoader
                isRowLoaded={this.props.isRowLoaded}
                loadMoreRows={this.props.handleInfiniteOnLoad}
                rowCount={data.length}
            >
                {({onRowsRendered}) => autoSize({height, isScrolling, onChildScroll, scrollTop, onRowsRendered})}
            </InfiniteLoader>
        );
        return (
            <List>
                {
                    data.length > 0 && (
                        <WindowScroller>
                            {infiniteLoader}
                        </WindowScroller>
                    )
                }
                {this.props.loading && <Spin className="demo-loading"/>}
            </List>
        );
    }
}

export default ArticleList;